<template>
    <div class="over">
      <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="10">最新</el-menu-item>
        <el-menu-item index="1">新鲜事</el-menu-item>
        <el-menu-item index="2">日常投稿</el-menu-item>
        <el-menu-item index="3">打听求助</el-menu-item>
        <el-menu-item index="4">吐槽</el-menu-item>
        <el-menu-item index="5">树洞</el-menu-item>
        <el-menu-item index="6">表白墙</el-menu-item>
        <el-menu-item index="7">拼车</el-menu-item>
        <el-menu-item index="8">二手闲置</el-menu-item>
        <el-menu-item index="9">兼职专区</el-menu-item>
      </el-menu>
  
      <div >
        <div class="post" v-for="post in items" :key="post.id">
          <div class="post-header" @click="detailed(posts.postId)">
              <img :src="post.authorAvatar" alt="用户头像" class="user-avatar">
              <div class="post-meta">
                  <span class="username">
                    <span class="username">
                        <el-tag  type="warning">兼职专区</el-tag>
                    <!-- <el-tag v-if="posts.categoryId==1">新鲜事</el-tag>
                    <el-tag v-else-if="posts.categoryId==2">日常投稿</el-tag>
                    <el-tag v-else-if="posts.categoryId==3" type="danger">打听求助</el-tag>
                    <el-tag v-else-if="posts.categoryId==4" type="info">吐槽</el-tag>
                    <el-tag v-else-if="posts.categoryId==5" type="success">树洞</el-tag>
                    <el-tag v-else-if="posts.categoryId==6" type="success">表白墙</el-tag>
                    <el-tag v-else-if="posts.categoryId==7" type="warning">拼车</el-tag>
                    <el-tag v-else-if="posts.categoryId==8" type="warning">二手闲置</el-tag>
                    <el-tag v-else type="warning">兼职专区</el-tag> -->
                  </span>
                  </span>
                  <span class="date">{{ post.createdAt }}</span>
                  <span class="community">帖子分类：4444</span>
                  <!-- <span class="community">帖子分类：{{ posts.categoryId }}</span> -->
              </div>
          </div>
          <div class="post-content" >
              <h3>{{ post.title }}</h3>
              <p>{{ post.content }}</p>
          </div>
          <div class="post-footer">
            <span class="views">观看人数：3333</span>
            <button @click="del(post.postId)" >取消收藏</button>
              <!-- <span class="views">观看人数：{{ posts.viewCount }}</span>
              <button @click="del(posts.postId)" >取消收藏</button> -->
          </div>
      </div>
  
      </div>
    </div>
  </template>
  
  
  <script>
  export default {
    data() {
      return {
        items:[],
        total: 0,
      }
    },
    created() {
      //请求分页查询数据
      this.load()
    },
    methods: {
      load() {
        this.request.post("/favorites/list").then(res => {
          this.items = res.data;
          console.log(this.items);
          
        })
      },
      handleSelect(key) {
        console.log(key);
        
      },
      detailed(id){
        this.request.post("/posts/click?id="+id).then(res => {       
          this.$router.push("detailed");
          console.log(res);
          
        })
      },
      del(id){
            this.request.post("/collect/del?id=" + id)
                .then(res => {
                  this.load();
                  console.log(res);
                  
                })
                .catch(error => {
                    console.error("Error del user data:", error);
                });
        },
    }
  }
  </script>
  
  <style>
  .over {
      font-family: Arial, sans-serif;
      line-height: 1;
      margin: 0;
      background-color: white;
      box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
      border-radius: 10px;
      /* padding: 20px; */
      background-color: white;
  }
  
  .post {
      border: 1px solid #ddd;
      margin-bottom: 20px;
      padding: 10px;
      border-radius: 5px;
  }
  
  .post-header {
      display: flex;
      align-items: center;
  }
  
  .user-avatar {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 50%;
  }
  
  .post-meta {
      display: flex;
      flex-direction: column;
  }
  
  .username {
      font-weight: bold;
  }
  
  .date, .community {
      color: #666;
  }
  
  .post-content {
      margin-top: 8px;
  }
  
  .post-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
  }
  
  .views, .comments, .shares {
      color: #666;
  }
  </style>